<script lang="ts" setup>
import { useI18n } from "vue-i18n";
import { UserStore } from "@/store";
//import { RouterEnums } from "@/types";
import { useRouter } from "vue-router";
const { t } = useI18n();
const router = useRouter();
const exitfunctin = () => {
  const userStore = UserStore();
  userStore.resetUserConfig();
  userStore.$reset();
  router.back();
};
const emits = defineEmits(["onclose"]);
</script>
<template>
  <div class="exit-frame">
    <img class="tuichu-caise-img" src="@/image/new_img/home/user_img/tuichu_caise.png" />
    <div class="title-content">{{ t("userSet.quitTheCurrentAccount") }}</div>
    <div class="exitIllustrate">{{ t("userSet.exitIllustrate") }}</div>
    <div>
      <img
        class="bottom-frame"
        src="@/image/new_img/home/user_img/btnv2_exit.png"
        @click="exitfunctin"
      />
    </div>
    <div>
      <img
        class="bottom-frame marginTop30"
        src="@/image/new_img/home/user_img/btnv2_exit_cancel.png"
        @click="
          () => {
            emits('onclose');
          }
        "
      />
    </div>
  </div>
</template>
<style lang="less" scoped>
.exit-frame {
  width: 100%;
  height: auto;
}
.tuichu-caise-img {
  width: 135px;
  height: 135px;
  margin: auto;
  margin-top: 34px;
}
.title-content {
  width: 100%;
  height: auto;
  margin-top: 34px;
  text-align: center;
  font-size: 34px;
  color: #ffffff;
}
.exitIllustrate {
  width: 513px;
  line-height: 40px;
  font-size: 23px;
  color: rgba(255, 255, 255, 0.65);
  margin: auto;
  margin-top: 64px;
}
.bottom-frame {
  width: 214px;
  height: 85px;
  margin: auto;
  margin-top: 80px;
}
.marginTop30 {
  margin-top: 30px;
}
</style>
